;(function(){
	$(document).ready(function($) {
		
		var $viewImg = $('.view-img');
		var max_slider = 2;

		var sliderArr = [];
		if($viewImg.length<=0){
			return false;
		}
		var winW = $(window).width(),
			winH = $(window).height();
		
		$viewImg.click(function(event) {
			var _this = $(this);
			var $imgList = _this.parent();
			var showIndex = _this.index();
			var imgLength = $imgList.children().length;
			var loryEntity = null;
			if($imgList.attr('data-id')){
				var curSlide = $imgList.attr('data-id');
				var loryIndex =  parseInt($imgList.attr('data-index'));
				$('#'+curSlide).parent().removeClass('view-img-hidden');
				loryEntity = sliderArr[loryIndex];
				loryEntity.slideTo(showIndex);
			}
			else{
				var idNum = Math.random().toString().replace('.','');
				var sliderId = 'slider'+idNum;
				var imgUrl = null;
				$imgList.attr('data-id',sliderId);

				var htmlStr = '<div class="view-img-layout"><div class="slider" id="'+sliderId+'"><div class="frame js_frame"><ul class="slides js_slides">';
				var pageStr = '';
				for (var i = 0; i < imgLength; i++) {
					imgUrl = $imgList.find('li').eq(i).attr('data-image');
					htmlStr += '<li class="js_slide"><img src="images/toast-load.gif" class="view-loading">';
					htmlStr = htmlStr + '<img class="view-lar-img view-img-hidden" src="'+ imgUrl + '"></li>';
					pageStr += '<li class="lory-pagination-item"></li>';
				}
				htmlStr += '</ul></div>'
				htmlStr +='<span class="js_prev prev"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"></path></g></svg></span>'
				htmlStr +='<span class="js_next next"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"></path></g></svg></span>'
				htmlStr +='</div><ul class="lory-pagination">';
				htmlStr += pageStr;
				htmlStr += '</ul><div class="view-img-close">关闭</div></div>';
				$('body').append(htmlStr);

				
				$('li.js_slide').css({
					'height': winH+'px',
					'width': winW+'px'
				});
				var $layout = $('#'+sliderId).parent();
				var $larImg = $layout.find('.view-lar-img');
				$larImg.each(function() {
					$(this).on('load',function(){
						var _img = $(this);
						var imgW = _img.width();
						var imgH = _img.height();
						var ascpect = (imgW/imgH).toFixed(2);
						if(imgW>winW && ascpect>=0.75){
							_img.css({
								left: 0,
								top: '50%',
								width: winW+'px'
							});
							imgH = _img.height();
							_img.css('marginTop',-imgH/2-30+'px');
						}
						else if(imgW<winW&&ascpect>=0.75 || imgH<winH&&ascpect<0.75){
							_img.css({
								left: '50%',
								top: '50%',
								marginTop : -imgH/2-30+'px',
								marginLeft : -imgW/2+'px'
							});
							
						}
						else if(imgH>winH&&ascpect<0.75){
								_img.css({
									left: '50%',
									top: '0',
									height: winH+'px'
								});
								imgW = _img.width();
								_img.css('marginLeft',-imgW/2+'px');
						}
						_img.off('load').removeClass('view-img-hidden');
						_img.parent().find('.view-loading').addClass('view-img-hidden');
					});
				});
				$layout.find('.view-img-close').click(function(event) {
					event.stopPropagation();
					$(this).parent().addClass('view-img-hidden');
				});
				
				var slider = document.getElementById(sliderId);
				loryEntity = lory(slider, {slideSpeed:500});
				loryEntity.slideTo(showIndex);
				$layout.find('.lory-pagination-item').eq(showIndex).addClass('active').siblings().removeClass('active');
				slider.addEventListener('after.lory.slide', function(e){
					var currentSlide = e.detail.currentSlide;
					$layout.find('.lory-pagination-item').eq(currentSlide).addClass('active').siblings().removeClass('active');
				});

				sliderArr.push(loryEntity);
				var arr_index = jQuery.inArray(loryEntity,sliderArr);
				$imgList.attr('data-index',arr_index);

				// 超过弹窗最大数目后删除最前一个
				if ($('.view-img-layout').length > max_slider) {
					var $firstLayout = $('.view-img-layout').eq(0);
					var data_id = $firstLayout.find('.slider').attr('id');
					$firstLayout.remove();
					sliderArr.shift();
					$('.img-list[data-id='+data_id+']').removeAttr('data-id').removeAttr('data-index');
					setTimeout(function(){
						$('.img-list[data-index]').each(function(){
							console.log($(this).attr('data-index'));
							var ind = parseInt($(this).attr('data-index'));
							$(this).attr('data-index',ind-1);
						});	
					},200);
				}
			}
			
		});
	});
})();